Tengo una pesadilla tratando de extraer datos de una API meteorológica y mostrarlos en React, pero cuando ejecuto mi código aparece un error:
"Los objetos no son válidos como elementos secundarios de React (encontrado: [objeto Promesa]). Si pretendía representar una colección de elementos secundarios, use una matriz en su lugar".
Mi código está a continuación:
export default function getWeatherFromApiAsync() { return fetch( "https://api.openweathermap.org/data/2.5/weather?q=brighton,uk&appid=8b609354454cdb6c5a7092a939861ace&units=metric" ) .then((response) => response.json()) .then((responseJson) => { return ( <div className="App"> {responseJson.map((weather) => ( <div> <h6> {weather.coord.lon}</h6> </div> ))} </div> ); }) .catch((error) => { console.error(error); }); }¡Cualquier ayuda apreciada!
No puede representar un componente predeterminado de una promesa como esa.
Puede aprovechar las ventajas de useState , useEffect hook para obtener y representar datos en el componente.
Puede obtener más información sobre React Hooks en este enlace .
Y también su respuesta api es un objeto json y está tratando de map .
Nota: Solo puede mapear sobre el tipo de matriz de datos.
Aquí está su código de trabajo suyo,
import { useEffect, useState } from "react"; const App = () => { const [data, setData] = useState({}); useEffect(() => { const getWeatherFromApiAsync = async () => { const resopnse = await fetch( "https://api.openweathermap.org/data/2.5/weather?q=brighton,uk&appid=8b609354454cdb6c5a7092a939861ace&units=metric" ); const resopnseJson = await resopnse.json(); console.log("json", resopnseJson); setData(resopnseJson); }; getWeatherFromApiAsync(); }, []); return ( <div className="App"> <h6>{data?.coord?.lon}</h6> </div> ); }; export default App;